﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport"    content="width=device-width, initial-scale=1.0">
	
	<title>生日祝福</title>
   
   <style>
       body{
           background-image: url(./wall.svg);
           text-align: center;
           vertical-align:middle;
       }
       #wall {

       }
   
   </style>

   <!-- author: equationl -->
   
</head>

<body>
	<div id="content">
        <img id="board" src="./signboard.svg" style="width:100%;height:100%;">
        <div id="wall">

        </div>
   </div>

    <div>
        我也要发弹幕:
        <select  name="color" id="color" >
            <option value="black">黑色</option>
            <option value="red">红色</option>
            <option value="green">绿色</option>
            <option value="blue">蓝色</option>
            <option value="yellow">黄色</option>
        </select>
        <select name="size" id="text_size" >
            <option value="1">大文字</option>
            <option value="0">小文字</option>
        </select>
        <select name="position" id="position"   >
            <option value="0">滚动</option>
            <option value="1">顶端</option>
            <option value="2">底端</option>
        </select>
        <input type="textarea" id="text" max=300 />
        <button type="button"  onclick="send()">发送</button>
    </div><br>
            弹幕显示方式:
        <select  name="show_way" id="show_way" onchange="change_way()">
            <option value="immediately">即时弹幕</option>
            <option value="newest">最新发表在前</option>
        </select>

	<script src="./js/jquery-1.11.1.min.js"></script>
	<script src="./js/jquery.danmu.js"></script>  <!-- jquery.danmu.js (//github.com/chiruom/danmu/) - Licensed under
	 the MIT license  -->
<script>
    var c_w = $(document.body).width();
    var c_h = $(document.body).height();
    var b_w = $("#board").width();
    var b_h = $("#board").height();
    var left_x = b_w*0.1;
    var top_y = c_h*0.40;
    //console.log(c_h + " " + b_h)
    var height = b_h-b_h*0.509;
    var width =  b_w-b_w*0.17;
    var danmuss={ 1:[ { "text":"生日快乐" , "color":"red" ,"size":"0","position":"0"},
        { "text":"生日快乐" , "color":"red" ,"size":"0","position":"2"} ],
        3:[ { "text":"生日快乐" , "color":"red" ,"size":"1","position":"1"},
            { "text":"生日快乐" , "color":"#FFFFFF" ,"size":"0","position":"0"} ],
        50:[ { "text":"生日快乐2" , "color":"#FFFFFF" ,"size":"0","position":"2"}, ] };
    $("#wall").danmu({
        left: left_x,    //区域的起始位置x坐标
        top: top_y ,  //区域的起始位置y坐标
        height: height, //区域的高度
        width: width, //区域的宽度
        zindex :100, //div的css样式zindex
        speed:20000, //弹幕速度，飞过区域的毫秒数
        sumtime:86400, //弹幕运行总时间
        danmuss:danmuss, //danmuss对象，运行时的弹幕内容
        default_font_color:"#000000", //弹幕默认字体颜色
        font_size_small:16, //小号弹幕的字体大小,注意此属性值只能是整数
        font_size_big:24, //大号弹幕的字体大小
        opacity:"0.9", //弹幕默认透明度
        top_botton_danmu_time:6000 //顶端底端弹幕持续时间
    } );
    $('#wall').danmu('danmu_start');
    get();

    function send(){
        var url_post = "./post.php";
        var text = $("#text").val();
        var color = $("#color").val();
        var position = $("#position").val();
        var size = $("#text_size").val();
        console.log(text)
        var time = jQuery('#wall').data("nowtime") + 5;
        var text_obj = '{ "text":"' + text + '","color":"' + color + '","size":"' + size + '","position":"' + position + '","time":' + time + '}';
        if (url_post)
            jQuery.post(url_post, {
                danmu: text_obj
            });
        var text_obj = '{ "text":"' + text + '","color":"' + color + '","size":"' + size + '","position":"' + position + '","time":' + time + ',"isnew":""}';
        var new_obj = eval('(' + text_obj + ')');
        jQuery('#wall').danmu("add_danmu", new_obj);
        $("#text").val(" ");
        };
    function get(way) {
        way = way || 'immediately';
        var url_get = "./get.php";
        var get_data = {way:way};
        $.get(url_get, 
            get_data,
            function(data, status) {
                console.log(data);
                if (status == "success") {
                    for(var p in data){
                        var text_obj = data[p];
                        var new_obj = eval('(' + text_obj + ')');
                        jQuery('#wall').danmu("add_danmu", new_obj);
                    }
                }
                else {
                    alert("获取数据失败！");
                }
            },
            "json");
        var myDate = new Date();
        var h = myDate.getHours();       //获取当前小时数(0-23)
        var m = myDate.getMinutes();     //获取当前分钟数(0-59)
        var s =  myDate.getSeconds();     //获取当前秒数(0-59)
        var now_time = (h*3600+m*60+s)*10;
        //console.log($("#wall").data("nowtime"));  
        $("#wall").data("nowtime", now_time);
    }

    function change_way() {
        var way = $("#show_way").val();
        $('#wall').danmu('danmu_stop');
        $('#wall').danmu('clear_danmu');
        get(way);
        if (way == "newest") {
            $("#wall").data("nowtime", 0);
        }
        $('#wall').danmu('danmu_start');
    }
</script>
	
</body>
</html>